<!--
 * @Description:输入支付密码组件
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-12 10:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-21 14:41:54
-->
<template>
	<u-popup :value="payPwdPopShow" :mask-close-able="false" class="pay-pwd-pop" height="850" mode="bottom"
		border-radius="30">
		<view class="popup-main">
			<view class="header">
				<slot v-if="type!=1"></slot>
				<text class="title">
					{{title}}
				</text>
				<u-icon @click="close" name="close"></u-icon>
			</view>
			<view class="amount" v-if="type!=1">
				$<text>{{amount}}</text>
			</view>
			<view class="number">
				<u-message-input :disabledKeyboard="true" :focus="false" disabled :value="value" :dot-fill="true"
					:maxlength="maxlength" @finish="finish"></u-message-input>
			</view>
			<u-keyboard @change="keyboardEvent" :dot-enabled="false" ref="uKeyboard" :mask-close-able="false"
				:tooltip="false" :mask="false" @backspace="keyboardBackspace" v-model="show"></u-keyboard>
		</view>
	</u-popup>
</template>


<script>
	export default {
		name: "inputPayPassword",
		props: {
			// 支付密码显示
			payPwdPopShow: {
				default: false,
				type: Boolean
			},
			// 长度
			maxlength: {
				default: 4,
				type: Number
			},
			title: {
				default: 'Please enter your safe password',
				type: String
			},
			amount: {
				default: '',
				type: [String, Number]
			},
			type:{
				default:0,
				type:Number
			}
		},
		data() {
			return {
				show: true,
				value: '',

			};
		},

		methods: {
			// 键盘改变事件
			keyboardEvent(val) {
				console.log(this.value.length, this.maxlength)
				// 当输入的长度大于 最大长度时不再新增
				if (this.value.length < this.maxlength) {
					this.value += val
				} else {
					return
				}
				this.$nextTick(() => {

					if (this.value.length === this.maxlength) {
            console.log("===z $nextTick finish")
						this.$emit('finish', this.value, () => {
							this.value = ''
						})
            this.value = ''
					}

				})
			},
			keyboardBackspace() {
				this.value = this.value.slice(0, -1);
			},
			// 关闭
			close() {

				this.$emit('update:payPwdPopShow', false),
					this.$emit('payPwdPopClose'),
					this.$emit('close'),
					this.value = ''

			},
			finish(val) {
        console.log("===z finish")
				this.$emit('finish', val)
        this.close()
			}
		},
	}
</script>

<style lang="scss" scoped>
	// .input-pay-pwd-container {
	.pay-pwd-pop {
		/deep/ .u-drawer-content {
			padding-top: 30rpx;

			// padding-bottom: 200rpx;
			.uni-scroll-view-content {}
		}

		.popup-main {
			position: relative;
			height: 100%;

			// 标题
			.header {
				margin-bottom: 30rpx;
				padding: 0 30rpx;
				text-align: center;
				color: #000000;

				>text {
					font-size: 36rpx;
				}

				.u-icon {
					position: absolute;
					right: 0;
					top: 0;
					transform: translate(-100%);
					font-size: 30rpx;
				}
			}

			// 金额
			.amount {
				text-align: center;
				font-size: 32rpx;

				>text {
					font-size: 76rpx;
					padding-left: 8rpx;
				}
			}

			.number {
				/deep/ .u-char-flex {
					.u-char-item {
						// border-color: #A9AEEC !important;
					}
				}

			}

			/deep/ .u-drawer {
				position: absolute;
				height: 440rpx;
				bottom: 0;
				left: 0;
				top: auto;

				.u-mask {
					display: none;
				}
			}

		}

		.pay-pwd-input {
			// background-color: #ccc;
			margin: 0 auto;
		}
	}

	// }
</style>